<template>
  <div class="lottie-box">
    <div class="loading-box" ref="lottieRef"></div>
    <div class="loading-text">加载中</div>
  </div>
</template>
<script setup lang="ts">
  import lottie from 'lottie-web';
  import loadingData from '@/assets/lottie/loading3.json';
  import { onMounted, ref } from 'vue';
  import { useRouter } from 'vue-router';
  import { HOME_URL } from '@/config';

  const router = useRouter();

  // lottie加载中
  const lottieRef = ref();
  const lottieLoading = ref(false);

  onMounted(() => {
    // loading动画
    lottieLoading.value = true;
    if (lottieRef.value) {
      lottie.loadAnimation({
        container: lottieRef.value,
        renderer: 'svg',
        loop: true,
        autoplay: true,
        animationData: loadingData,
      });
    }
    router.push(HOME_URL);
  });
</script>
<style scoped lang="scss">
  .lottie-box {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    .loading-box {
      width: 300px;
      height: 200px;
    }

    .loading-text {
      font-size: 18px;
      color: var(--el-text-color-regular);
    }
  }
</style>
